<template>
  <!-- 注册页面 -->
  <div>
    <van-nav-bar title="请注册" left-arrow @click-left="onClickLeft" />
    <div class="box">
      <van-field
        required
        v-model="phone"
        label="手机号"
        placeholder="请输入手机号"
        :state="phoneState"
        @blur.native.capture="checkPhone"
      />
      <van-field
        required
        type="password"
        v-model="upwd"
        label="密码"
        placeholder="请输入密码"
        :state="upwdState"
        @blur.native.capture="checkPwd"
      />
      <van-field
        required
        type="password"
        v-model="upwd2"
        label="确认密码"
        placeholder="请输入密码"
        :state="upwd2State"
        @blur.native.capture="checkPwd2"
      />

      <van-field
        required
        v-model="sms"
        center
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
      >
        <template #button>
          <van-button @click="gainCode" size="small" type="warning">{{
            time
          }}</van-button>
        </template>
      </van-field>
    </div>
    <!-- 注册按钮 -->
    <van-button @click="register" type="warning" block>注册</van-button>
  </div>
</template>

<script>
//函数调用Notify 消息提示
import { Notify } from "vant";
export default {
  data() {
    return {
      upwd: "",
      upwdState: "",
      upwd2: "",
      upwd2State: "",
      phone: "",
      phoneState: "",
      isClick: true,
      time: "获取验证码",
      sms: "",
    };
  },
  methods: {
    checkPwd() {
      //验证密码
      // 以字母开头，长度在6~10之间，只能包含字母、数字和下划线
      let exp = /^[a-zA-Z]\w{5,9}$/;
      if (exp.test(this.upwd)) {
        //验证成功
        this.upwdState = "success";
        return true;
      } else {
        //验证失败
        //弹出输入错误
        Notify({ type: "danger", message: "密码有误请检查", duration: 1000 });
        this.upwdState = "error";
        return false;
      }
    },
    checkPwd2() {
      //验证确认密码
      let exp = /^[a-zA-Z]\w{5,9}$/;
      if (exp.test(this.upwd2) && this.upwd == this.upwd2) {
        //验证成功
        this.upwd2State = "success";
        return true;
      } else {
        //验证失败
        //弹出输入错误
        Notify({
          type: "danger",
          message: "密码不一致,请检查",
          duration: 1000,
        });
        this.upwd2State = "error";
        return false;
      }
    },
    checkPhone() {
      //验证手机号
      let exp = /^1[3-9]\d{9}$/;
      if (exp.test(this.phone)) {
        //验证成功
        this.phoneState = "sucess";
        return true;
      } else {
        //验证失败
        //弹出输入错误
        Notify({ type: "danger", message: "手机号有误", duration: 1000 });
        this.phoneState = "error";
        return false;
      }
    },
    // 点击注册按钮触发的函数
    register() {
      if (this.checkPwd() && this.checkPwd2() && this.checkPhone()) {
        // 发送网络请求，申请注册
        const url = "register";
        const params = `phone=${this.phone}&upwd=${this.upwd}&sms=${this.sms}`;
        this.axios.post(url, params).then((res) => {
          // console.log(res);
          if (res.data.code == 200) {
            this.$router.push("/login");
            return;
          } else {
            this.$toast("验证码不正确");
            return;
          }
        });
      } else {
        this.$toast("手机号或密码有误");
      }
      // 未上线时可以将上面代码注释掉，解开下面代码
      // if (this.checkPwd() && this.checkPwd2() && this.checkPhone()) {
      //   //注册成功之后跳转到登录页面
      //   Notify({ type: "success", message: "注册成功", duration: 1000 });
      //   this.$router.push("/login");
      // } else {
      //   //弹出输入错误
      //   Notify({ type: "danger", message: "注册失败"，duration: 1000 });
      // }
    },
    // 获取验证码
    gainCode() {
      if (this.isClick) {
        if (
          /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9]\d{8}$)/.test(
            this.phone
          )
        ) {
          // 连接验证码接口
          const url = "sms_send";
          const params = `phone=${this.phone}`;
          this.axios.post(url, params).then((res) => {
            console.log(res);
          });
          this.isClick = false;
          let s = 60;
          this.time = s + "s";
          let interval = setInterval(() => {
            s--;
            this.time = s + "s";
            if (s < 0) {
              this.time = "重新获取";
              this.isClick = true;
              clearInterval(interval);
            }
          }, 1000);
        } else {
          this.$toast("请输入正确的手机号");
          return 0;
        }
      }
    },
    onClickLeft() {
      return this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
:deep(.van-nav-bar .van-icon) {
  color: #000;
}
</style>

<style lang="scss" scoped>
.box {
  margin: 25px 0;
}
</style>
